<template>
	<div class="warp">
		<div class="row" style="height:90px;">
			<div class="label">
				抽出条件名称
			</div>
			<el-input type="textarea" :rows="3" placeholder="请输入内容" class="long-ipt" v-model="wrkClsListData[0].label">
			</el-input>
		</div>
		<div class="row spb border-top">
			<div class="label">
				機器番号
			</div>

			<el-input v-model="wrkClsListData[0].label" class="long-ipt"></el-input>
		</div>
		<div class="row spb">
			<div class="label">
				カテゴリ
			</div>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				適用法規
			</div>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				重要度
			</div>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				腐食ループ
			</div>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				測定部位
			</div>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				材質分類
			</div>

			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				サイズ
			</div>
			<el-select v-model="wrkClsListData[0].label" class="shot-ipt mar16" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt middle-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				保温保冷
			</div>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				足場工事
			</div>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				検査方法
			</div>
			<el-select v-model="wrkClsListData[0].label" class="long-ipt" placeholder=" ">
				<el-option v-for="item in wrkClsListData" :key="item.key" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
		</div>
		<div class="row spb">
			<div class="label">
				定点区分
			</div>
		</div>
		<div class="lastRow">
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
				<el-checkbox v-for="city in cities" :key="city">
					<el-input v-model="timeFormat" class="shot-ipt yellow"></el-input>
				</el-checkbox>
			</el-checkbox-group>
		</div>

	</div>
</template>

<script>

const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {
	name: "tab1",
	data() {
		return {
			checkedCities: ['上海', '北京'],
			cities: cityOptions,
			timeFormat: '',
			wrkClsListData: [
				{
					key: 9,
					label: "Ｍ／Ｈ開放"
				}, {
					key: 10,
					label: "開放"
				}, {
					key: 11,
					label: "359"
				},
			]
		};
	},
	components: {

	},
	watch: {},
	methods: {
		handleCheckedCitiesChange(value) {
			let checkedCount = value.length;
			this.checkAll = checkedCount === this.cities.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
		},
	},
	created() { },
	mounted() { },
	beforeDestroy() { },
	destroyed() { }
};
</script>
<style  lang="scss" scoped>
.warp {
	height: auto !important;
}

.row {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	padding: 8px 0;

	.label {
		width: 105px;
		min-width: 105px;
		height: 32px;
		display: flex;
		align-items: center;
	}

	.w130 {
		max-width: 130px;
		min-width: 130px;
		width: 130px;
	}

	button {
		width: 68px;
		height: 32px;
		line-height: 32px;
		background: #ffffff;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
	}

	.fb {
		display: flex;
		justify-content: space-between !important;
	}

	::v-deep .el-checkbox {
		width: 32% !important;
		margin: 5px 0;
	}
}

.lastRow {
	::v-deep .el-checkbox-group {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.el-checkbox {
			margin: 0 0 10px 0;
		}
	}
}


.ipt {
	width: 238px;
	height: 32px;

	::v-deep .el-input {
		width: 100%;
	}

	::v-deep .el-input__inner {
		width: 100%;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}
}

.shot-ipt {
	width: 160px;
	height: 32px;
	min-width: 120px;

	::v-deep .el-input {
		width: 100%;
	}

	::v-deep .el-input__inner {
		width: 100%;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}
}

.yellow {
	::v-deep .el-input__inner {
		background-color: #ffffe1;
	}
}

.long-ipt {
	width: 507px;
	min-width: 507px;
	max-width: 507px;
	height: 32px;

	::v-deep .el-input--suffix {
		width: 100%;
	}

	::v-deep .el-input__inner {
		width: 100%;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}

	::v-deep .el-icon-time:before {
		content: "";
		display: block;
		transform: translateY(-3px);
	}

	::v-deep .el-range-separator {
		transform: translateY(-3px);
	}
}

.middle-ipt {
	width: 333px;
	min-width: 333px;
	max-width: 333px;
}

::v-deep .el-textarea__inner {
	resize: none;
}

.mar10 {
	margin-right: 10px;
}

.mar16 {
	margin-right: 16px;
}

.border-top {
	border-top: 1px solid #D9D9D9;
}

.border-bottom {
	border-bottom: 1px solid #D9D9D9;
}

.border-left {
	border-left: 1px solid #D9D9D9;
}

.border-right {
	border-right: 1px solid #D9D9D9;
}
</style>
